<div class="main-content">
    <div class="main-content-wrap">
        <div class="left-panel">
            <nz-radio-group [(ngModel)]="treeValue" [nzButtonStyle]="'solid'" (ngModelChange)="getListData()" style="width: 100%;">
                <label nz-radio-button nzValue="23" style="width: 100%;text-align: center;">按区县</label>
                <!--<label nz-radio-button nzValue="22" style="width: 50%;text-align: center;">按管理处</label>-->
            </nz-radio-group>
            <nz-tree
                #objTreeComponent
                [nzData]="listData"
                nzCheckable
                [nzCheckedKeys]="defaultKeys"
                (nzCheckBoxChange)="selectedAreaChanged($event)">
            </nz-tree>
            <!--<ul nz-menu nzMode="inline" class="hr-statistics-left-menu">-->
            <!--<li nz-menu-item-->
            <!--*ngFor="let item of listData; let idx = index"-->
            <!--[nzSelected]="idx === 0"-->
            <!--(click)="selectedAreaChanged(item.id)">-->
            <!--{{item.item}}-->
            <!--</li>-->
            <!--</ul>-->
        </div>

        <div class="right-panel">
            <div class="right-top-box">

                <div class="right-content">
                    <nz-card [nzTitle]="'灌溉进度统计'"
                             class="card">
                        <div
                            echarts
                            [options]="baseOpt"
                            [merge]="irrOptChange"
                            style="height: 291px;"
                        ></div>
                    </nz-card>
                    <nz-card [nzTitle]="'用水量统计'"
                             class="card">
                        <div
                            echarts
                            [options]="baseOpt"
                            [merge]="waterOptChange"
                            style="height: 291px;"
                        ></div>
                    </nz-card>
                    <nz-card [nzTitle]="'灌溉进度及用水量报表'"
                             class="row-card">
                        <nz-table
                            #inletTable
                            nzBordered
                            [nzData]="tableData"
                            nzSize="middle">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th *ngFor="let name of tableHead">{{ name }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr *ngFor="let row of inletTable.data">
                                <td>{{ row.name }}</td>
                                <td *ngFor="let name of tableHead">{{ row[name] }}</td>
                            </tr>
                            </tbody>
                        </nz-table>

                    </nz-card>
                </div>
            </div>
        </div>
    </div>

</div>

